// import SockJS from "sockjs-client/dist/sockjs.min.js";
import {
  Tabs,
  Sticky,
  Toast,
  SearchBar,
  Carousel,
  Ellipsis,
} from "@arco-design/mobile-react";
import { useState, useEffect } from "react";
import { decrement, increment } from "../../store/modules/counterStore";
import { useSelector, useDispatch } from "react-redux";
import "../../less/home.less";

import {   indexList } from "../../apis/api";
// 轮播图
function CarouselDemo() {
  const bannerList = [
    {
      type: 1,
      did: 2100,
      chapterid: 0,
      src: "http://ksyuncomic.9comic.cn/comic/2024/01/05/02814a789243b6f3fe4d131093b672a4.jpg",
      width: 784,
      height: 543,
      url: "",
      title: "",
      desc: "",
    },
    {
      type: 1,
      did: 2087,
      chapterid: 0,
      src: "http://ksyuncomic.9comic.cn/comic/2023/10/04/0020e332b2184493dbc335507c2c9eeb.jpg",
      width: 720,
      height: 552,
      url: "",
      title: "",
      desc: "",
    },
    {
      type: 1,
      did: 162,
      chapterid: 0,
      src: "http://ksyuncomic.9comic.cn/comic/2019/05/09/3c73282d9e3399b7a37f0ff2ae7447fe.jpg",
      width: 720,
      height: 568,
      url: "",
      title: "",
      desc: "",
    },
    {
      type: 1,
      did: 103,
      chapterid: 0,
      src: "http://ksyuncomic.9comic.cn/comic/2019/04/10/43748157489a32e35f8858da65e658f4.jpg",
      width: 1080,
      height: 852,
      url: "",
      title: "",
      desc: "",
    },
    {
      type: 1,
      did: 164,
      chapterid: 0,
      src: "http://ksyuncomic.9comic.cn/comic/2019/04/10/fc7a5a0ca9fd0bb929b48c426791869f.jpg",
      width: 720,
      height: 516,
      url: "",
      title: "",
      desc: "",
    },
  ];
  const bannerClick = (item) => {
    console.log(item);
  };
  return (
    // <Carousel bounceWhenNoLoop indicatorType="circle" list={bannerList} boxHeight={22}  autoHeight={true}>
    // </Carousel>
    <Carousel bounceWhenNoLoop boxHeight={22} autoHeight={true}>
      {bannerList.map((item, index) => {
        return (
          <img
            src={item.src}
            alt=""
            onClick={() => bannerClick(item)}
            key={index}
          />
        );
      })}
    </Carousel>
  );
}
// 列表
function ListDemo() {
  const [list, setList] = useState([]);
  useEffect(() => {
    indexList().then((res) => {
      // console.log(res.data.tab);
      setList(res.data.tab);
    });
  }, []);
  console.log("list", list);
  if (list.length === 0) {
    let lists = [
      {
        id: "13",
        name: "宝藏·大家正在看",
        pictype: "h",
        list: [
          {
            id: 162,
            cateid: "1,2",
            userid: 0,
            author: "仟绘动漫",
            title: "追夫36计：老公来战!",
            tag: "青春 都市 恋爱",
            info: "她暗恋他多年，他拒绝她多年，用尽36计追求，却发现惹了个大麻烦！这些真的值得吗？ 作品改编自纵横中文网同名小说。",
            pic: "http://ksyuncomic.9comic.cn/comic/2019/07/23/907ecc56f6256b123db19304b3e45c16.jpg",
            bigpic:
              "http://ksyuncomic.9comic.cn/comic/2019/03/04/54e3f962eea1d467516f5ef342cf262a.jpg",
            newpic: "",
            indexpic: "",
            updatepic: "",
            firstchapterid: 2658,
            lastchapter: "第277话 午餐愉快",
            lastNumChapter: "277",
            ifend: 0,
            vip: 1,
            coupon: 0,
            look: 12521423,
            createtime: 1551165996000,
            updatetime: 1579138564301,
            onlinetime: "",
            cpid: 0,
            status: 1,
            num_comment: 656,
            num_love: 8245,
            num_look: 12522405,
            num_fav: 52506,
            if_fav: 0,
            if_love: 0,
            if_update: 0,
            lastReadChapter: {},
            indexsort: 1,
          },
          {
            id: 103,
            cateid: "1,2",
            userid: 0,
            author: "仟绘动漫",
            title: "腹黑少爷撩上我",
            tag: "都市 恋爱",
            info: "本一心想调查父亲的真正死因，随着深入竟牵扯集团黑幕和谋杀血案，更惹上阴冷骄横的腹黑少爷，本世纪最彪女主遇上宇宙级腹黑少爷蹦擦出妖艳旋律……《腹黑少爷撩上我》改编自纵横中文网火爆作者墨春花大大的《权少贪欢，撩婚99天》",
            pic: "http://ksyuncomic.9comic.cn/comic/2019/07/19/4fb817924e1df9c8b81379d92fbb95ac.jpg",
            bigpic:
              "http://ksyuncomic.9comic.cn/comic/2019/03/01/27a5a56681857d58dea45897fa94a495.jpg",
            newpic: "comic/2019/07/19/409e05c81c65f816f834f71fa25572cb.jpg",
            indexpic: "",
            updatepic: "",
            firstchapterid: 311,
            lastchapter: "第137话",
            lastNumChapter: "137",
            ifend: 0,
            vip: 1,
            coupon: 0,
            look: 6982271,
            createtime: 1548746919000,
            updatetime: 1568973396111,
            onlinetime: "",
            cpid: 0,
            status: 1,
            num_comment: 378,
            num_love: 7616,
            num_look: 6982876,
            num_fav: 36085,
            if_fav: 0,
            if_love: 0,
            if_update: 0,
            lastReadChapter: {},
            indexsort: 2,
          },
          {
            id: 1745,
            cateid: "1,2",
            userid: 0,
            author: "慕斯",
            title: "总裁任性宠萌妻",
            tag: "恋爱 霸总",
            info: "夏莫言只把洛梦溪当做她的替身，当夏莫言发现自己爱上洛梦溪时，夏莫言该怎么面对她，当夏莫言发现洛梦溪就是她时，夏莫言还能怎么办，只能宠着她喽。",
            pic: "http://ksyuncomic.9comic.cn/comic/2020/11/20/2ab524ae915ff3baecf312d58b44db93.jpg",
            bigpic:
              "http://ksyuncomic.9comic.cn/comic/2020/11/20/59e5e2957769563560e2b6d8112b1c93.jpg",
            newpic: "",
            indexpic: "",
            updatepic: "",
            firstchapterid: 4813899,
            lastchapter: "第110话 跑了？",
            lastNumChapter: "110",
            ifend: 0,
            vip: 0,
            coupon: 0,
            look: 915008,
            createtime: 1605867646006,
            updatetime: 1623030640902,
            onlinetime: "",
            cpid: 0,
            status: 1,
            num_comment: 59,
            num_love: 1228,
            num_look: 915297,
            num_fav: 9063,
            if_fav: 0,
            if_love: 0,
            if_update: 0,
            lastReadChapter: {},
            indexsort: 3,
          },
          {
            id: 128,
            cateid: "2,7",
            userid: 0,
            author: "仟绘动漫",
            title: "这个总裁有点残",
            tag: "恋爱 校园",
            info: "某天夜晚方怡在高级别墅中被人玷污，而玷污她的人正是和她有千丝万缕联系的林寒。 早在孩童时期初次见面他们之间就注定了一种虐与被虐的关系，直到今天…… 这么多年过去了她的生活会有转机吗？ 他们之间会发生怎样的爱恨情仇？ 仇恨背后的秘密又是什么呢？",
            pic: "http://ksyuncomic.9comic.cn/comic/2019/07/19/f96f7ff0ccc5ff488fa36b19b72346e6.jpg",
            bigpic:
              "http://ksyuncomic.9comic.cn/comic/2019/03/01/d05e65e1709e488ec8c18b02aabfda75.jpg",
            newpic: "",
            indexpic: "",
            updatepic: "",
            firstchapterid: 2055,
            lastchapter: "第143话",
            lastNumChapter: "143",
            ifend: 0,
            vip: 1,
            coupon: 0,
            look: 21304177,
            createtime: 1549947914000,
            updatetime: 1580526900213,
            onlinetime: "",
            cpid: 0,
            status: 1,
            num_comment: 1598,
            num_love: 18022,
            num_look: 21305117,
            num_fav: 91663,
            if_fav: 0,
            if_love: 0,
            if_update: 0,
            lastReadChapter: {
              id: 2055,
              comicid: 128,
              chapter: "1",
              name: "1话",
              sort: 1,
              createtime: 1550129064000,
              updatetime: 1566803309267,
              status: 1,
            },
            indexsort: 4,
          },
          {
            id: 164,
            cateid: "1,2,9",
            userid: 0,
            author: "仟绘动漫",
            title: "最强农民工",
            tag: "都市 恋爱 搞笑",
            info: "一个小小的维修工李青，原本过着普普通通的打工生活，却莫名的被牵扯到大家族的斗争中，而他本人的背后却有着惊天的秘密！！！---漫画改编自纵横中文网同名小说。 ",
            pic: "http://ksyuncomic.9comic.cn/comic/2019/07/19/f39683e2b15e1dcae5af8f66600ed905.jpg",
            bigpic:
              "http://ksyuncomic.9comic.cn/comic/2019/03/04/ed7a66bad4c7abf8c207cab6ee523769.jpg",
            newpic: "comic/2019/08/06/08a9fd5e5c8b9aba88d639822268a1f8.jpg",
            indexpic: "",
            updatepic: "",
            firstchapterid: 2947,
            lastchapter: "第219话 上梁不正下梁歪",
            lastNumChapter: "219",
            ifend: 0,
            vip: 1,
            coupon: 0,
            look: 10746274,
            createtime: 1551165996000,
            updatetime: 1594783575716,
            onlinetime: "",
            cpid: 0,
            status: 1,
            num_comment: 711,
            num_love: 6809,
            num_look: 10746791,
            num_fav: 41387,
            if_fav: 0,
            if_love: 0,
            if_update: 0,
            lastReadChapter: {
              id: 2947,
              comicid: 164,
              chapter: "1",
              name: "1话",
              sort: 1,
              createtime: 1551618159000,
              updatetime: 1551618159000,
              status: 1,
            },
            indexsort: 5,
          },
        ],
      },
    ];
    setList(lists);
  }

  return (
    <div className="list-container">
      {Array.isArray(list) &&
        list.map((item, index) => {
          return (
            <div key={index} className="list-item">
              <div className="title">{item.name}</div>
              <div className="imglist">
                {item.list.map((items, indexs) => {
                  return (
                    <div key={indexs} className="img-item">
                      <div className="img">
                        <img src={items.pic} alt="" />
                      </div>
                      <div className="img-title">
                        <Ellipsis text={items.title} maxLine={1}></Ellipsis>
                      </div>
                    </div>
                  );
                })}
                {item.list.length % 3 > 1 ? (
                  <div className="img-item"></div>
                ) : null}
              </div>
            </div>
          );
        })}
    </div>
  );
}
function TasDemo1() {
  const tabData = [
    { title: "人气榜" },
    { title: "男生榜" },
    { title: "女生榜" },
    { title: "新作榜" },
    { title: "催更榜" },
  ];
  const [tabIndex, setTabIndex] = useState(0);
  return (
    <Tabs
      tabs={tabData}
      defaultActiveTab={tabIndex}
      tabBarHasDivider={false}
      tabBarArrange="left"
      onAfterChange={(tab, index) => {
        setTabIndex(index);
      }}
      tabBarPadding={{ left: 10, right: 10 }}
      tabBarGutter={30}
      tabBarScrollChance="after-jump"
      autoHeight={true}
    >
      <div className="demo-tab-content">Content area</div>
      <div className="demo-tab-content">Content area</div>
      <div className="demo-tab-content" style={{ height: 200 }}>
        Content area
      </div>
      <div className="demo-tab-content">Content area</div>
      <div className="demo-tab-content" style={{ height: 200 }}>
        Content area
      </div>
    </Tabs>
  );
}
function TabsDemo() {
  const tabData = [{ title: "推荐" }, { title: "榜单" }, { title: "分类" }];
  const [tabIndex, setTabIndex] = useState(0);

  return (
    <Tabs
      tabs={tabData}
      defaultActiveTab={tabIndex}
      tabBarHasDivider={false}
      tabBarArrange="left"
      onAfterChange={(tab, index) => {
        setTabIndex(index);
      }}
      tabBarExtra={
        <div className="demo-tabs-add-extra">
          {/* <svg width="16" height="16" viewBox="0 0 16 16">
            <rect x="7" y="2" width="2" height="12" rx="0.5" fill="#86909C" />
            <rect
              x="14"
              y="7"
              width="2"
              height="12"
              rx="0.5"
              transform="rotate(90 14 7)"
              fill="#86909C"
            />
          </svg> */}
          <SearchBarDemo />
        </div>
      }
      tabBarPadding={{ left: 22, right: 10 }}
      tabBarGutter={20}
      tabBarScrollChance="after-jump"
      autoHeight={true}
      renderTabBar={(TabBar) => <Sticky topOffset={0}>{TabBar}</Sticky>}
    >
      <div className="demo-tab-content">
        <CarouselDemo></CarouselDemo>
        <ListDemo />
      </div>
      <div className="demo-tab-content">
        <TasDemo1 />
      </div>
      <div className="demo-tab-content" style={{ height: 200 }}>
        Content area
      </div>
    </Tabs>
  );
}

//调用websocket监听
async function Websockets() {
  const socket = new WebSocket("ws://localhost/custom/path");
  // const socket = new WebSocket("ws://127.0.0.1/custom/path");
  // 监听连接打开事件
  socket.onopen = function (event) {
    console.log("WebSocket connection opened");
    // 可以在这里发送初始消息给服务器
    socket.send("Hello Server!");
  };

  // 监听消息事件
  socket.onmessage = function (event) {
    const message = event.data;
    console.log(`Received message: ${message}`);
    // 处理接收到的消息
  };

  // 监听连接关闭事件
  socket.onclose = function (event) {
    console.log("WebSocket connection closed");
    // 可以在这里处理连接关闭后的逻辑
  };

  // 监听错误事件
  socket.onerror = function (error) {
    console.error(`WebSocket error: ${error}`);
    // 处理WebSocket错误
  };
}
//搜索框
function SearchBarDemo() {
  const handleClick = (inputValue) => {
    console.log(inputValue);
  };

  return (
    <div>
      <SearchBar
        shape={"round"}
        onCancel={handleClick}
        placeholder="请输入关键词"
        actionButton={null}
      />
    </div>
  );
}

function Head() {
  return (
    <div className="head">
      <div className="left">
        <TabsDemo initialTabIndex={0} />
      </div>
    </div>
  );
}
function model() {
  return (
    <div>
      <Button onClick={() => Websockets()} needActive>
        WebSocket
      </Button>
      {/* DONE 调用 dispatch 函数提交 action */}
      {/* dispatch函数需要的参数是 action 对象，action对象是通过 decrement / increment （actionCreate）方法得到的 */}
      {/* decrement / increment 方法一定要执行，只有执行了才能得到 action 对象 */}
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}
// import { Button } from 'antd';
import { Button } from "@arco-design/mobile-react";
export default function Home() {
  // 使用 store 中的数据
  const { count } = useSelector((state) => state.counter);
  const [flag, setFlag] = useState(false);
  // // 获取dispatch函数来分发actions
  const dispatch = useDispatch();
  useEffect(() => {
    indexList().then((res) => {
      console.log(res);
    });
  }, []);
  return (
    <div className="home">
      <Head />
    </div>
  );
}
